<template>
    <el-card class="m-8">
        <section slot="header" class="mb-4 flex items-center justify-between">
            <div>
                <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
            </div>
                
            <div class="flex items-center justify-between">
                <span class="mr-4 block">礼物名称：</span>
                <el-input class="mr-4 input" v-model="listQuery.search" placeholder="请输入礼物名称"></el-input>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </div>
        </section>
  
        <el-table :data="tableList" align="center" border class="mt-4" stripe>
            <el-table-column label="序号" prop="id"/>
            <el-table-column label="礼物ID" prop="gift_id" />
            <el-table-column label="礼物名称" prop="gift.name" />
            <el-table-column label="礼物价格" prop="gift.price"/>
            <el-table-column label="礼物图片" prop="sex">
            <template slot-scope="scoped">
                <el-image :src="scoped.row.gift.picture" fit="fill" class="imageStyle" :lazy="true"></el-image>
            </template>
            </el-table-column>
            <el-table-column label="合成列表排序" prop="sort"/>
            <el-table-column label="合成数量" prop="total"/>
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="{row}">
                    <el-button type="text" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
  
        <cus-pagination
            :limit.sync="listQuery.perPage"
            :page.sync="listQuery.page"
            :total="total"
            @pagination="initData"
        />
  
        <!-- 添加 -->
        <el-dialog
            :close-on-click-modal="false"
            :visible="addDialog"
            lock-scroll
            title="添加礼物"
            width="30%"
            @close="closeAddDialog"
        >
                <div class="flex items-center">
                    <p class="mr-4 w-20"><span style="color: red;">*</span>礼物ID:</p>
                    <el-input v-model="user_code" placeholder="请输入礼物ID" />
                </div>
        
                <section slot="footer">
                    <el-button @click="addDialog = false">取消</el-button>
                    <el-button type="primary" @click="handleChecked()">确定</el-button>
                </section>
        </el-dialog>
        <el-dialog
            :close-on-click-modal="false"
            :visible="addDialog2"
            lock-scroll
            title="添加礼物"
            width="30%"
            @close="closeAddDialog2"
        >
                <el-form :model="form" ref="form" :rules="rules" label-width="150px" :inline="false" size="normal">
                    <el-form-item label="礼物ID">
                        <el-input v-model="form.gift_id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="礼物名称">
                        <el-input v-model="form.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="礼物单价">
                        <el-input v-model="form.price" disabled>
                            <template slot="append">M豆</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="合成排序" prop="sort">
                        <el-input v-model="form.sort"></el-input>
                    </el-form-item>
                </el-form>
        
                <section slot="footer">
                    <el-button @click="addDialog2 = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit(row)">确定</el-button>
                </section>
        </el-dialog>
  
    </el-card>
</template>

<script>
  import {
    magicListData,
    magicDel,
    magicAdd,
    giftList
  } from '@/api/magicCircle'
  
  export default {
    data() {
      return {
        dialogVisible: true,
        selectData: '',
        options: [
            {
              value: 1,
              label: '礼物'
            },
            {
              value: 2,
              label: '装扮'
            }
        ],
        options2: [
            {
              value: 1,
              label: '兑换'
            },
            {
              value: 2,
              label: '合成'
            }
        ],
        options3: [
            {
              value: 1,
              label: '礼物'
            },
            {
              value: 2,
              label: '道具'
            }
        ],
        tableList: [],
        user_code: '',
        listQuery: {
          user_code: '',
          nickname: '',
          page: 1,
          perPage: 10,
        },
        meta: {
          page: 1,
          perPage: 10
  
        },
        total: 0,
        /* 弹出框开关 */
        addDialog: false,
        addDialog2: false,
  
        rejectLoading: false,
        passLoading: false,
        id: '',
        // 拒绝原因
        reject_reason: '',
        form: {
            price: undefined,
            id: undefined,
            name: undefined,
            sort: undefined,
            cid: undefined,
        },
        rules: {
            sort: [{ required: true, message: '请输入合成排序', trigger: 'blur' }]
        },
      }
    },
    created() {
      this.initData()
    },
    methods: {
      handleAdd() {
        this.addDialog = true
      },
      handleSearch() {
        this.listQuery.page = 1
        this.initData()
      },
      handleReset() {
        this.listQuery = {
          user_code: '',
          nickname: '',
          page: 1,
          perPage: 10,
        }
        this.initData()
      },
      async initData() {
        try {
          for (let key in this.listQuery) {
            this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
          }
          const { data } = await magicListData(this.listQuery)
          this.listQuery.page = data.meta.page
          this.total = data.meta.total
          this.tableList = data.list
        } catch (e) {
          console.error(e)
        }
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除合成礼物, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { code, data} = await magicDel({
            id: row.id
          })
          if(code === 200) {
  
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.initData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      
      async handleChecked() {
        if (!this.user_code.trim()) {
          return void this.$message.warning('请填写用户编号！')
        }
        let data = {
          id: this.user_code,
          page: 1
        }
        giftList(data).then(res => {
          if (res.data) {
            this.addDialog = false
            this.addDialog2 = true
            this.form.gift_id = res.data.data[0].id
            this.form.name = res.data.data[0].name
            this.form.price = res.data.data[0].price
          }
        }).finally(() => this.rejectLoading = false)
      },
      onSubmit() {
        magicAdd(this.form).then(res => {
          if(res.code === 200) {
            this.initData()
            this.addDialog2 = false
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          }
        })
      },
      closeAddDialog() {
        this.user_code = undefined
        this.addDialog = false
      },
      closeAddDialog2() {
        this.addDialog2 = false
        if (this.$refs['form']) {
            this.$refs['form'].clearValidate() // 清除整个表单的校验
            this.$refs['form'].resetFields() // 清除整个表单的校验
        }
        this.form = {
            price: undefined,
            id: undefined,
            name: undefined,
            sort: undefined,
        }
      },
      handleAddProp() {

      }
    }
  }
</script>
  
<style scoped>
  .imageStyle {
    width: 150px;
  }

  .input{
    width: 200px;
  }
</style>
  